<!-- /templates/customers/login.liquid -->

<div class="page-width page-container">

  <div class="customer__account-form text-center">
    <div class="note form-success hide" id="ResetSuccess">
      {{ 'customer.recover_password.success' | t }}
    </div>

    <div id="CustomerLoginForm" class="form-vertical">
      {% form 'customer_login' %}

        <h1 class="h2">{{ 'customer.login.title' | t }}</h1>

        {{ form.errors | default_errors }}

        <label for="CustomerEmail" class="label--hidden">{{ 'customer.login.email' | t }}</label>
        <input type="email" name="customer[email]" id="CustomerEmail" class="input-full {% if form.errors contains 'email' %} input--error{% endif %}" placeholder="{{ 'customer.login.email' | t }}" autocorrect="off" autocapitalize="off" autofocus/>

        {% if form.password_needed %}
          <label for="CustomerPassword" class="label--hidden">{{ 'customer.login.password' | t }}</label>
          <input type="password" value="" name="customer[password]" id="CustomerPassword" class="input-full {% if form.errors contains 'password' %} input--error{% endif %}" placeholder="{{ 'customer.login.password' | t }}"/>
        {% endif %}

        <p>
          <input type="submit" class="btn" value="{{ 'customer.login.sign_in' | t }}"/>
        </p>
        <p><a href="{{ shop.url }}">{{ 'customer.login.cancel' | t }}</a></p>
        {% if form.password_needed %}
          <p><a href="#recover" id="RecoverPassword">{{ 'customer.login.forgot_password' | t }}</a></p>
        {% endif %}
        <p>{{ 'customer.login.create_account' | t | customer_register_link }}</p>

      {% endform %}
    </div>

    <div id="RecoverPasswordForm" class="form-vertical hide">

      <h2>{{ 'customer.recover_password.title' | t }}</h2>
      <p>{{ 'customer.recover_password.subtext' | t }}</p>

      <div>
        {% form 'recover_customer_password' %}

          {{ form.errors | default_errors }}

          {% if form.posted_successfully? %}
            <span class="hide reset-password-success"></span>
          {% endif %}

          <label for="RecoverEmail" class="label--hidden">{{ 'customer.recover_password.email' | t }}</label>
          <input type="email" value="" name="email" id="RecoverEmail" class="input-full" placeholder="{{ 'customer.recover_password.email' | t }}" autocorrect="off" autocapitalize="off"/>

          <p>
            <input type="submit" class="btn" value="{{ 'customer.recover_password.submit' | t }}"/>
          </p>

          <button type="button" id="HideRecoverPasswordLink" class="btn--link">{{ 'customer.recover_password.cancel' | t }}</button>
        {% endform %}
      </div>

    </div>

    {% if shop.checkout.guest_login %}
      <h2>{{ 'customer.login.guest_title' | t }}</h2>

      {% form 'guest_login' %}
        <input type="submit" class="btn" value="{{ 'customer.login.guest_continue' | t }}"/>
      {% endform %}
    {% endif %}
  </div>
</div>
